<template>
    <a-layout class="layout-box">
        <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
            <div class="logo"></div>
            <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
                <a-menu-item key="userList" @click="toPath('userList')">
                    <user-outlined />
                    <span>用户列表</span>
                </a-menu-item>
                <a-menu-item key="permissionList" @click="toPath('permissionList')">
                    <menu-outlined />
                    <span>权限管理</span>
                </a-menu-item>
                <a-menu-item key="logList" @click="toPath('logList')">
                    <file-outlined />
                    <span>日志列表</span>
                </a-menu-item>
                <a-menu-item key="mapManage1" @click="toPath('mapManage1')">
                    <file-outlined />
                    <span>地图1</span>
                </a-menu-item>
                <a-menu-item key="mapManage2" @click="toPath('mapManage2')">
                    <file-outlined />
                    <span>地图2</span>
                </a-menu-item>
                <a-menu-item key="mapManage3" @click="toPath('mapManage3')">
                    <file-outlined />
                    <span>地图3</span>
                </a-menu-item>
                <a-menu-item key="mapManage4" @click="toPath('mapManage4')">
                    <file-outlined />
                    <span>地图4</span>
                </a-menu-item>
            </a-menu>
        </a-layout-sider>
        <a-layout>
            <a-layout-header style="background: #fff; padding-left: 20px;">
                <div class="header">
                    <div class="left">
                        <menu-unfold-outlined v-if="collapsed" class="trigger"
                            @click="() => (collapsed = !collapsed)" />
                        <menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)" />
                    </div>
                    <div class="right">
                        <span>欢迎您：{{ userName }}</span>
                        <span class="exit" @click="toExit">退出登录</span>
                    </div>
                </div>
            </a-layout-header>
            <a-layout-content :style="{ margin: '24px 16px', padding: '24px', background: '#fff', }">
                <router-view></router-view>
            </a-layout-content>
        </a-layout>
    </a-layout>


</template>
<script>
import { logout } from "@/api/login";

import { UserOutlined, MenuOutlined, FileOutlined, MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
export default {
    data() {
        return {
            collapsed: false,
            selectedKeys: ['userlist'],
            userName: 'dingkeNB'
        }
    },
    components: {
        UserOutlined,
        MenuOutlined,
        FileOutlined,
        MenuUnfoldOutlined,
        MenuFoldOutlined,
    },
    computed: {

    },
    mounted() {
        this.selectedKeys = [this.$route.path.slice(1)]
    },
    methods: {
        toPath(data) {
            this.$router.push(data)
        },
        toExit() {
            sessionStorage.clear()
            this.$message.success('退出成功')
            this.$router.push('/login')
            // logout()
            //     .then((res) => {
            //         console.log(res, 8888);

            //         if (res.code == 200) {
            //             sessionStorage.clear()
            //             this.$message.success('退出成功')
            //             this.$router.push('/login')
            //         }
            //     })
            //     .catch(() => { });

        }
    }
}
</script>


<style scoped lang="less">
.layout-box {
    width: 100%;
    height: 100%;
    overflow: auto;
}

.logo {
    height: 32px;
    line-height: 32px;
    margin: 16px;
    color: #fff;
    text-align: center;
}

.header {
    display: flex;
    justify-content: space-between;

    .right {
        .exit {
            cursor: pointer;
            margin-left: 20px;
        }

    }
}
</style>
